<template>
  <div class="line-echart">
    <base-echart :option="option" />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue"
import BaseEchart from "./base-echart.vue"
import type { EChartsOption } from "echarts"

// const props = defineProps<{
//   labels: string[]
//   values: string[]
//   name: string
// }>()
interface Props {
  labels: string[]
  values: string[]
  name: string
}

const props = withDefaults(defineProps<Props>(), { name: "数据统计分析" })

const option = computed<EChartsOption>(() => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: props.labels,
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: props.name,
        type: "line",
        stack: "总量",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: props.values,
      },
    ],
  }
})
</script>

<style lang="less" scoped></style>
